<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动相册</title>
    <style>
    /* 位移：translate
    旋转：rotate
    缩放：scale
    倾斜：skew */
        body{
            background-color: black;
        }
        .box{
            width: 150px;
            height: 200px;
            border: 5px solid white;

            /* 固定定位 */
            position: fixed;
            /* left: 0;
            top: 0;
            right: 0;
            bottom: 0; */
            /* 上面代码简写 */
            inset: 0;

            /* 神来之笔 窗口大小变了，也会居中 */
            margin: auto;
            /* 变换盒子的样式为维持3D空间 */
            transform-style: preserve-3d;
            /* rotate 旋转 */
            transform:rotateX(-10deg) rotateY(10deg);
            
        }
        .box>img{
            width: 100%;
            height: 100%;
            /* 绝对定位 */
            position: absolute;
            /* 盒子阴影: 水平偏移 垂直偏移 模糊度 扩张度 阴影颜色 */
            box-shadow: 0 0 15px 5px rgba(163, 220, 242, 0.8);
            /* 倒影  */
            -webkit-box-reflect: below 10px linear-gradient(to bottom,transparent,rgba(0,0,0,.18));
            /* linear-gradient(to bottom,transparent,rgba(0,0,0,.18) 
                线性渐变 到底部 透明的 rgba(0,0,0,.18) 透明度0.18
            */
        }
        .box>img:nth-child(1){
            /* translate 位移 移动位置*/
            transform: rotateY(30deg) translateZ(600px);
        }
        .box>img:nth-child(2){
            transform: rotateY(60deg) translateZ(600px);
        }
        .box>img:nth-child(3){
            transform: rotateY(90deg) translateZ(600px);
        }
        .box>img:nth-child(4){
            transform: rotateY(120deg) translateZ(600px);
        }
        .box>img:nth-child(5){
            transform: rotateY(150deg) translateZ(600px);
        }
        .box>img:nth-child(6){
            transform: rotateY(180deg) translateZ(600px);
        }
        .box>img:nth-child(7){
            transform: rotateY(210deg) translateZ(600px);
        }
        .box>img:nth-child(8){
            transform: rotateY(240deg) translateZ(600px);
        }
        .box>img:nth-child(9){
            transform: rotateY(270deg) translateZ(600px);
        }
        .box>img:nth-child(10){
            transform: rotateY(300deg) translateZ(600px);
        }
        .box>img:nth-child(11){
            transform: rotateY(330deg) translateZ(600px);
        }
        .box>img:nth-child(12){
            transform: rotateY(360deg) translateZ(600px);
        }


    </style>
</head>
<body>
    <div class="box">
        <img src="./img/cleer ARC ll.png" alt="">
        <img src="./img/Hi novaMate 50 Pro.png" alt="">
        <img src="./img/KARCHERWD 1s.png" alt="">
        <img src="./img/Redmi Note 12 Turbo.png" alt="">
        <img src="./img/联想拯救者R7000.png" alt="">
        <img src="./img/华硕天选4.png" alt="">
        <img src="./img/小米Redmi K70.png" alt="">
        <img src="./img/彩族C6.png" alt="">
        <img src="./img/惠普16-wf0032TX.png" alt="">
        <img src="./img/戴尔MS116有线鼠标.png" alt="">
        <img src="./img/班尼路（Baleno）.png" alt="">
        <img src="./img/织造司原创明制国风.png" alt="">
    </div>
</body>
</html>